import React from 'react'
import { Avatar, Icon, Popover, Badge, Button, Switch } from 'antd'
import { Link } from 'react-router-dom'
import Debounce from 'lodash-decorators/debounce'
import { connect } from 'dva'
import styles from './index.less'

const content = (
  <div>
    <p>Message 1</p>
    <p>Message 2</p>
    <p>Message 3</p>
    <p>Message 4</p>
    <p>Message 5</p>
  </div>
)

const UserInfo = (props) => (
  <div>
    <h4>Profile</h4>
    <h4>Setting</h4>
    <Link to="/login">
      <Button type="primary" onClick={props.onLogout}>Logout</Button>
    </Link>
  </div>
)

@connect(({ global, menu }) => ({
  global,
  menu,
}))
class GlobalHeader extends React.PureComponent {
  handleTabSwitch = () => {
    this.props.dispatch({
      type: 'menu/changeUseNavTab',
    })
  }

  handleLogout = () => {
    this.props.dispatch({
      type: 'menu/clear',
    })
  }

  handleMenuCollapse = () => {
    this.props.dispatch({
      type: 'global/changeLayoutCollapsed',
    })
    this.triggerResizeEvent()
  }

  /* eslint-disable*/
  @Debounce(600)
  triggerResizeEvent = () => {
    const event = document.createEvent('HTMLEvents')
    event.initEvent('resize', true, false)
    window.dispatchEvent(event)
  }

  render() {
    const { userInfo, collapsed } = this.props.global
    const { useNavTab } = this.props.menu

    return (
      <div className={styles.globalHeader}>
        <Icon
          className={styles.trigger}
          type={collapsed ? 'menu-unfold' : 'menu-fold'}
          onClick={this.handleMenuCollapse}
        />
        <div className={styles.right}>
          <span className={styles.action}>
            <Icon type="search"/>
          </span>
          <span className={styles.action}>
            <Switch checked={useNavTab} size="small" onChange={this.handleTabSwitch} />
          </span>
          <span className={styles.action}>
            <Popover placement="bottom" content={content} title="Message" trigger="click">
              <Badge count={5}>
                <Icon type="bell"/>
              </Badge>
            </Popover>
          </span>
          <span className={styles.action}>
            <Popover placement="bottom" content={<UserInfo onLogout={this.handleLogout} />} title="Message">
              <Avatar icon="user" />
              <span style={{margin: 5, textTransform: 'capitalize'}}>
                {userInfo ? userInfo.userName : 'Guest'}
              </span>
            </Popover>
          </span>
        </div>
      </div>
    )
  }
}

export default GlobalHeader
